<template id="about_class">
	<div class="about">

		<div class="about_us">

			<!--头部-->
			<div class="about_header">

				<div class="about_title">
					<router-link to=""><img src="../../assets/images/class/jiantou_03.png" /></router-link>

					<p>约课上门</p>
					<div class="about_select">
						<div class="about_ing" @click='toggle()'><span></span><span></span><span></span></div>
						<div class="about_kile" v-show='dropdownActive'>
							<ul>
								<li @click.stop="hour"><img src="../../assets/images/class/yueke_03.png" /><span>按课时</span></li>
								<li @click.stop="range"><img src="../../assets/images/class/yueke_07.png" /><span>按距离</span></li>
								<li @click.stop="star"><img src="../../assets/images/class/yueke_11.png" /><span>按星级</span></li>
								<li @click.stop="opin"><img src="../../assets/images/class/yuyue_18.png" /><span>按好评数</span></li>
								<li @click.stop="Order"><img src="../../assets/images/class/yueke_20.png" /><span>按可预约</span></li>
								<li @click.stop="coach"><img src="../../assets/images/class/yueke_23.png" /><span>所有教练</span></li>

							</ul>
						</div>

					</div>

				</div>
			</div>
			<!--头部结束-->

			<!--地址/条件筛选教练/搜索教练-->

			<div class="about_most">

				<!--更改地址/条件筛选-->
				<div class="about_top">
					<div class="about_top_left">
						<img src="../../assets/images/class/icon_location.png" />
						<span>{{ad}}</span>
						<span v-if=""></span>

					</div>
					<div class="about_top_right" @click.stop="address">
						<button @click.stop="addressChange">更改地址</button>

					</div>
				</div>
				<!--更改地址/条件筛选结束-->

				<!--搜索教练/请输入姓名和手机号-->
				<div class="about_bottom">
					<div class="about_bottom_left">
						<input type="text" name="" id="" placeholder="请输入教练姓名或手机号" @change="searchName" />
					</div>
					<div class="about_bottom_right">
						<button @click.stop="searchCoach">搜索教练</button>
					</div>
				</div>
				<!--搜索教练/请输入姓名和手机号结束-->

			</div>

			<!--地址/条件筛选教练/搜索教练结束-->

		</div>

		<!--教练的信息-->
		<div class="about_info">
			<!--教练一-->
			<div class="about_coach" v-for="item in most">
				<div class="about_coach_kile" @click.stop="coachPage">

					<dl @click.stop="aboutCoach(item)">
						<dt><img :src="item.photo"/></dt>
						<dd>
							<!--姓名-->
							<div class="coach_name">
								<p>{{item.name}}</p>

							</div>
							<!--姓名结束-->
							<!--累计课时与粉丝数-->
							<div class="coach_hour">
								<div class="coach_left">
									<div class="coach_xing">
										<el-rate v-model="item.star" disabled></el-rate>
									</div>
									<div class="coach_total">累计课时:<span> {{item.class_count}}小时</span></div>
								</div>
								<div class="coach_right">{{item.distance}}m</div>

							</div>
							<!--累计课时与粉丝数结束-->
							<!--好评-->
							<div class="coach_dome">
								<div class="coach_jin">
									<p>好评</p>
									<span>{{item.good_rate}}</span>
								</div>
								<font></font>
								<div class="coach_made">
									<p>粉丝数</p><span>{{item.thumbs_num}}</span><img src="../../assets/images/class/shou_14.png" /></div>
							</div>

							<!--今日可预约-->
							<div class="coach_data">
								<span style="color: #2d8f90;">{{item.isappointment==1 ? '今日可预约' : ''}}</span>
								<span>{{item.isappointment==0 ? '今日不可约' : ''}}</span>
								<p>两周内可预约{{item.appointmentcount}}天</p>
								<span></span>
							</div>
							<!--今日可预约结束-->

							<!--距离多少米-->
							<div class="coach_range">

								<div class="coach_min" v-for="(major, majorIndex) in item.major" :key="majorIndex">{{major}}</div>
							</div>
							<!--距离多少米结束-->

						</dd>
					</dl>

				</div>
			</div>
			<!--教练一结束-->

		</div>
		<!--教练的信息结束-->

	</div>
</template>
<script>
	import Vue from 'vue'
	export default {
		data() {
			return {
				value1: 2,
				searchInfoName: '',
				dropdownActive: false,
				most: [],
				newMost: [],
				num: 0,
				user: '',
				major: [],
				address: "",
				cookie: '',
				ad:'',
				numTop:'',
				nTop:'1',
				nTop2:'2'
			}
		},
		computed: {
			coachidInfo() {
				return this.$store.state.coachid;
			}
		},
	
		created() {
			let cmap = this.getCookie();
			let obj = {
				//请求的参数
				code: 1,
				lng: 116.4,
				lat: 39.9,
				most: [],
				cookie: cmap

			};
			this.cookie = cmap;
			//console.log(this.cookie);
			let _this = this
			let qs = require('qs');
			this.$axios.post("http://yogahome.top/yujia/user/findCoachByDistant", qs.stringify(obj), {
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				}
				//重写headers 请求头  qs.stringify(json对象) 把对象转化为字符串
			}).then(function(response) {
				
				for(let i = 0; i < response.data.data.length; i++) {
					if(!(response.data.data[i].major instanceof Array) && response.data.data[i].major) {
						response.data.data[i].major = response.data.data[i].major.split('|');
					}
				}
				// _this.newMost = _this.sliceArr(response.data.data, 30);
				// _this.most = _this.newMost[0];
				_this.most = response.data.data


			}).catch(function(error) {
				console.log(error);
			});
		},
		mounted() {
			this.getadd()
			this.getCookie()
			this.scrollHeight()
		},
		beforeUpdate(){
			this.scrollHeight()
			this.scrollGn()
		},
		methods: {
			scrollGn:function(){
			   var _this=this
			   setTimeout(() => {

				   	// console.log($('.about_info').children())
					// console.log($('.about_coach'))
					goPage(1,80)
					var pageSize
					function goPage(pno,psize){
						var num=$('.about_info').children().length
						var totalPage = 0;//总页数
						pageSize = psize;//每页显示行数
						//总共分几页 
						if(num/pageSize > parseInt(num/pageSize)){   
								totalPage=parseInt(num/pageSize)+1;   
						}else{   
							totalPage=parseInt(num/pageSize);   
						}   
						// console.log(totalPage+'总页数')
						var currentPage = pno;//当前页数
						var startRow = (currentPage - 1) * pageSize+1;//开始显示的行  31
						var endRow = currentPage * pageSize;//结束显示的行   
						endRow = (endRow > num)? num : endRow;    
						for(var i=1;i<(num+1);i++){    
							var irow = $('.about_info').children()[i-1];
							if(i>=startRow && i<=endRow){
								irow.style.display = "block";    
							}else{
								irow.style.display = "none";
							}
						}
						//1页数据的高度
						// var OneHeight=Number($('.about_coach').height())*Number(pageSize)
						// console.log(Number(OneHeight))   // 1340 2660 4020
						// console.log(_this.numTop)		
					}
					    // console.log(pageSize)
						// $(window).scroll( function() { 
						// 	_this.nTop2=_this.nTop
						// 	var numyshu=1;
						// 	if(_this.nTop >=80*100 || _this.nTop<=160*100){
						// 		numyshu++;
						// 		console.log(_this.nTop)
						// 		console.log(numyshu,numyshu*pageSize)
						// 	    setTimeout(() => {
						// 				goPage(2,80)
						// 			    console.log('===='+'ok')
						// 		}, 5000);
						// 	}
						//  } );	
						$(window).scroll( function() { 
							_this.nTop2=_this.nTop
							console.log(_this.nTop2)
							
							if(_this.nTop2 > 7000 && _this.nTop2 < 11000){
								// alert(1)
								 // setTimeout(() => {
										goPage(2,80)
									    console.log('===='+'ok1')
							// 	// }, 1);
							}else if(_this.nTop >=11000 && _this.nTop<=220*100){
								 setTimeout(() => {
										goPage(3,80)
									    console.log('===='+'ok2')
								}, 1);
							}
						 } );			
			   },500);
			},
			scrollHeight:function(){
				setTimeout(()=>{
				    var _this=this;
					$(window).scroll( function() { 
						// console.log($(document).scrollTop())     //2194 
						_this.nTop=$(document).scrollTop()  // 1 1097  2 2547 3 3997
						console.log(_this.nTop)
					} );
				},3000)
			},
			getadd:function(){
				var getadd=window.localStorage.getItem('add')
				this.ad=getadd.substring(6)
				//let SESSION_ID = JSON.parse(window.sessionStorage.getItem('SESSION_ID'));
				var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				//window.localStorage.setItem('sessionid',SESSION_ID.sessionid)

			},
			getCookie() {
				let map = new Map();
				let cookie = document.cookie.split(';');
				if(cookie == null || document.cookie == "") {
					map.set("city", "北京市");
					return map;
				}
				for(let i = 0; i < cookie.length; i++) {
					let key = cookie[i].split('=')[0].trim();
					let val = cookie[i].split('=')[1].trim();
					map.set(key, val);
				}
				return map;
			},
			sliceArr(most, len) {
				let a_len = most.length;
				let rulest = [];
				for(let i = 0; i < a_len; i += len) {
					rulest.push(most.slice(i, i + len));
				}
				return rulest;
			},
			toggle() {            
				this.dropdownActive = !this.dropdownActive       
			},
			//			按课时排序
			hour() {
				let obj = {
					//请求的参数
					coachid: 88891,
					code: 1,
					lng: 116.4,
					lat: 39.9,

				};
				let _this = this
				let qs = require('qs');
				this.$axios.post("http://yogahome.top/yujia/user/findCoachByDistant", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
					_this.dropdownActive = false;
					for(let i = 0; i < response.data.data.length; i++) {

						if(!(response.data.data[i].major instanceof Array) && response.data.data[i].major) {
							response.data.data[i].major = response.data.data[i].major.split('|');
						}
					}
					//_this.newMost = _this.sliceArr(response.data.data, 30)
					//_this.most = _this.newMost[0];
					_this.most = response.data.data

				}).catch(function(error) {
					console.log(error);
				});
			},
			//			按距离排序
			range() {
				let obj = {
					//请求的参数
					coachid: 88891,
					code: 1,
					lng: 116.4,
					lat: 39.9,

				};
				let _this = this
				let qs = require('qs');
				this.$axios.post("http://yogahome.top/yujia/user/findCoachInDistantByDis", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
					_this.dropdownActive = false;
					for(let i = 0; i < response.data.data.length; i++) {

						if(!(response.data.data[i].major instanceof Array) && response.data.data[i].major) {
							response.data.data[i].major = response.data.data[i].major.split('|');
						}
					}
					//_this.newMost = _this.sliceArr(response.data.data, 30)
					//_this.most = _this.newMost[0];
					_this.most = response.data.data

				}).catch(function(error) {
					console.log(error);
				});
			},
			//			按星级排序
			star() {
				let obj = {
					//请求的参数
					coachid: 88891,
					code: 1,
					lng: 116.4,
					lat: 39.9,

				};
				let _this = this
				let qs = require('qs');
				this.$axios.post("http://yogahome.top/yujia/user/findCoachInDistantByStar", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
					_this.dropdownActive = false;
					for(let i = 0; i < response.data.data.length; i++) {

						if(!(response.data.data[i].major instanceof Array) && response.data.data[i].major) {
							response.data.data[i].major = response.data.data[i].major.split('|');
						}
					}
					//_this.newMost = _this.sliceArr(response.data.data, 30)
					//_this.most = _this.newMost[0];
					_this.most = response.data.data

				}).catch(function(error) {
					console.log(error);
				});
			},
			//好评的排序
			opin() {
				let obj = {
					//请求的参数
					coachid: 88891,
					code: 1,
					lng: 116.4,
					lat: 39.9,

				};
				let _this = this
				let qs = require('qs');
				this.$axios.post("http://yogahome.top/yujia/user/findCoachInDistantByGoodEva", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
					_this.dropdownActive = false;
					for(let i = 0; i < response.data.data.length; i++) {

						if(!(response.data.data[i].major instanceof Array) && response.data.data[i].major) {
							response.data.data[i].major = response.data.data[i].major.split('|');
						}
					}
					//_this.newMost = _this.sliceArr(response.data.data, 30)
					//_this.most = _this.newMost[0];
					_this.most = response.data.data

				}).catch(function(error) {
					console.log(error);
				});
			},
			//			按可预约排序
			Order() {
				let obj = {
					//请求的参数
					coachid: 88891,
					code: 1,
					lng: 116.4,
					lat: 39.9,

				};
				let _this = this
				let qs = require('qs');
				this.$axios.post("http://yogahome.top/yujia/user/findCoachInDistantByOpenDays", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
					_this.dropdownActive = false;
					for(let i = 0; i < response.data.data.length; i++) {

						if(!(response.data.data[i].major instanceof Array) && response.data.data[i].major) {
							response.data.data[i].major = response.data.data[i].major.split('|');
						}
					}
					//_this.newMost = _this.sliceArr(response.data.data, 30)
					//_this.most = _this.newMost[0];
					_this.most = response.data.data

				}).catch(function(error) {
					console.log(error);
				});
			},
			//所有教练的排序
			coach() {
				let obj = {
					//请求的参数
					coachid: 88891,
					code: 1,
					lng: 116.4,
					lat: 39.9,

				};
				let _this = this
				let qs = require('qs');
				this.$axios.post("http://yogahome.top/yujia/user/findAllCoach", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
					_this.dropdownActive = false;
					for(let i = 0; i < response.data.data.length; i++) {

						if(!(response.data.data[i].major instanceof Array) && response.data.data[i].major) {
							response.data.data[i].major = response.data.data[i].major.split('|');
						}
					}
					//_this.newMost = _this.sliceArr(response.data.data, 30)
					//_this.most = _this.newMost[0];
					_this.most = response.data.data

				}).catch(function(error) {
					console.log(error);
				});
			},
			//			查看教练首页
			coachPage() {
				let obj = {
					//请求的参数
					coachid: 88891,
					code: 1,

				};
				let _this = this
				let qs = require('qs');
				
				this.$axios.post("http://yogahome.top/yujia/coach/showCoachHomepage", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {}).catch(function(error) {
					console.log(error);
				});
			},
			aboutCoach(val) {
				this.$router.push({
					path: "/about_coach",
					query: {
						coachid:val.coachid
					}
				})
			},

			searchName(e) {
				this.searchInfoName = e.target.value;
			},

			//搜索教练
			searchCoach() {
				let obj = {
					//请求的参数
					coachid: 88891,
					code: 1,
					lng: 116.4,
					lat: 39.9,
					keyword: this.searchInfoName,
				};
				let _this = this
				let qs = require('qs');
				this.$axios.post("http://yogahome.top/yujia/user/findCoachByKeyword", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(function(response) {
					for(let i = 0; i < response.data.data.length; i++) {

						if(!(response.data.data[i].major instanceof Array) && response.data.data[i].major) {
							response.data.data[i].major = response.data.data[i].major.split('|');
						}
					}

					if(response.data.code == '1') {
						_this.most = response.data.data;
//						alert("搜索教练成功")
					} else {
						alert(response.data.message)
					}

				}).catch(function(error) {
					console.log(error);
				});
			},
			//			更改地址
			addressChange() {
				// let SESSION_ID = JSON.parse(window.sessionStorage.getItem('SESSION_ID'));
				// // var SESSION_ID=window.localStorage.getItem('sessionid')
				// // alert(SESSION_ID)
				// if(SESSION_ID == '') {
				// 	alert("请登录")
				// var select_address
				// 	this.$router.push({
				// 	path: "/forgot_password",
				// 	query: {
				// 		select_address:'select_address'
				// 	}
				// })
				// 	return;
				// let SESSION_ID = window.sessionStorage.getItem('SESSION_ID')
				var	 SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				if(SESSION_ID == null) {
					alert("请登录")
					// this.$router.push("/forgot_password")
					var about_coach
						this.$router.push({
						path: "/forgot_password",
						query:{
							select_address:'select_address'
						}
					})
					return;
				}
				this.$router.push({
					path: "/select_address",
					query: {}
				})
				let obj = {
					sessionid: SESSION_ID.sessionid,
					userid: SESSION_ID.user.id,
					code: 1
				};
				let _this = this
				_this.sessionid = _this.$store.state.sessionid;
				let qs = require('qs');

				this.$axios.post("http://yogahome.top/yujia/user/findAllAddressByUser", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(function(response) {

				}).catch(function(error) {
					console.log(error);
				});
			},

		}
	}
</script>

<style scoped>
	@import "../../assets/css/about_class.css";
</style>
<style>
	.coach_xing .el-rate__item {
		width: 13px;
		margin-top: 2px;
	}
	
	.coach_xing .el-rate__icon {
		font-size: 12px;
	}
	
	.el-rate__icon .el-icon-star-on:before {
		width: 12px;
		height: 12px;
	}
</style>